<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reveal.js 动画演示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/black.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
    
    <style>
        /* 自定义字体 */
        .reveal h1, .reveal h2 {
            font-family: 'Ma Shan Zheng', cursive;
        }
        
        .reveal p, .reveal body {
            font-family: 'ZCOOL XiaoWei', serif;
        }
        
        /* 自定义动画样式 */
        .reveal h1 {
            text-shadow: 0 0 15px rgba(255, 215, 155, 0.7);
            letter-spacing: 1px;
        }
        
        .reveal h2 {
            color: #FFD700;
        }
        
        /* 只隐藏动画元素，不影响Reveal.js的过渡效果 */
        .reveal .animate-on-present {
            opacity: 0;
            --animate-duration: 1.2s;
        }
        
        /* 当幻灯片激活时显示动画元素 */
        .reveal .slides section.present .animate-on-present {
            opacity: 1;
        }
        
        /* 防止动画在过去和未来的幻灯片上播放 */
        .reveal .slides section.past .animate-on-present,
        .reveal .slides section.future .animate-on-present {
            animation: none !important;
        }
        
        /* 背景图片样式 */
        .reveal section {
            background-size: cover;
            background-position: center;
        }
        
        /* 卡片样式 */
        .content-card {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 12px;
            padding: 2rem;
            max-width: 800px;
            box-shadow: 0 0 20px rgba(255, 215, 155, 0.3);
        }
        
        /* 图片样式 */
        .image-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body class="bg-dark">
    <div class="reveal">
        <div class="slides">
            <!-- 第一页：主标题 -->
            <section data-background-image="img/bg1.png">
                <div class="flex flex-col items-center justify-center h-full">
                    <h1 class="animate-on-present animate__animated animate__jackInTheBox mb-6 text-[clamp(2.5rem,8vw,4rem)]">
                        <i class="fa fa-cheese mr-4"></i>算法小妞
                    </h1>
                    <h2 class="animate-on-present animate__animated animate__fadeInUp animate__delay-300ms text-[clamp(1.5rem,4vw,2.5rem)]">
                        动画效果演示
                    </h2>
                </div>
            </section>
            
            <!-- 第二页：多种动画展示 -->
            <section data-background-image="img/bg2.png">
                <div class="flex flex-col items-center justify-center h-full">
                    <h2 class="animate-on-present animate__animated animate__zoomIn mb-8 text-[clamp(1.8rem,5vw,3rem)]">
                        <i class="fa fa-magic mr-3"></i>动画效果集
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-3xl">
                        <div class="content-card animate-on-present animate__animated animate__slideInLeft animate__delay-200ms">
                            <h3 class="text-2xl mb-3 text-yellow-300">slideInUp</h3>
                            <p class="text-gray-100">从底部滑入的动画，适合步骤展示</p>
                        </div>
                        <div class="content-card animate-on-present animate__animated animate__slideInRight animate__delay-400ms">
                            <h3 class="text-2xl mb-3 text-yellow-300">slideInDown</h3>
                            <p class="text-gray-100">从顶部滑入的动画，形成视觉引导</p>
                        </div>
                        <div class="content-card animate-on-present animate__animated animate__fadeInLeft animate__delay-600ms">
                            <h3 class="text-2xl mb-3 text-yellow-300">fadeInLeft</h3>
                            <p class="text-gray-100">左侧淡入动画，适合侧边内容</p>
                        </div>
                        <div class="content-card animate-on-present animate__animated animate__bounceIn animate__delay-800ms">
                            <h3 class="text-2xl mb-3 text-yellow-300">bounceIn</h3>
                            <p class="text-gray-100">弹性进入动画，强调关键知识点</p>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 第三页：算法步骤与图片 -->
            <section data-background-image="img/bg1.png">
                <div class="flex flex-col items-center justify-center h-full">
                    <h2 class="animate-on-present animate__animated animate__bounceInDown mb-8 text-[clamp(1.8rem,5vw,3rem)]">
                        <i class="fa fa-list-ol mr-3"></i>算法步骤
                    </h2>
                    <div class="content-card animate-on-present">
                        <div class="space-y-6">
                            <div class="flex flex-col md:flex-row items-center gap-6">
                                <div class="w-full md:w-1/2 animate__animated animate__fadeInUp animate__delay-200ms">
                                    <h3 class="text-2xl text-yellow-300 flex items-center">
                                        <i class="fa fa-step-forward mr-3 text-purple-400"></i>步骤 1
                                    </h3>
                                    <p class="text-gray-100">遍历数组中的每个元素</p>
                                </div>
                                <div class="w-full md:w-1/2 animate__animated animate__slideInRight animate__delay-300ms">
                                    <img src="https://picsum.photos/id/1/300/200" alt="遍历数组" class="image-card animate-on-present animate__animated animate__fadeInRight">
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-center gap-6">
                                <div class="w-full md:w-1/2 animate__animated animate__fadeInUp animate__delay-400ms">
                                    <h3 class="text-2xl text-yellow-300 flex items-center">
                                        <i class="fa fa-step-forward mr-3 text-purple-400"></i>步骤 2
                                    </h3>
                                    <p class="text-gray-100">计算目标值与当前元素的差值</p>
                                </div>
                                <div class="w-full md:w-1/2 animate__animated animate__slideInRight animate__delay-500ms">
                                    <img src="https://picsum.photos/id/2/300/200" alt="计算差值" class="image-card animate-on-present animate__animated animate__fadeInRight">
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-center gap-6">
                                <div class="w-full md:w-1/2 animate__animated animate__fadeInUp animate__delay-600ms">
                                    <h3 class="text-2xl text-yellow-300 flex items-center">
                                        <i class="fa fa-step-forward mr-3 text-purple-400"></i>步骤 3
                                    </h3>
                                    <p class="text-gray-100">检查差值是否已在哈希表中</p>
                                </div>
                                <div class="w-full md:w-1/2 animate__animated animate__slideInRight animate__delay-700ms">
                                    <img src="https://picsum.photos/id/3/300/200" alt="哈希表查找" class="image-card animate-on-present animate__animated animate__fadeInRight">
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-center gap-6">
                                <div class="w-full md:w-1/2 animate__animated animate__fadeInUp animate__delay-800ms">
                                    <h3 class="text-2xl text-yellow-300 flex items-center">
                                        <i class="fa fa-step-forward mr-3 text-purple-400"></i>步骤 4
                                    </h3>
                                    <p class="text-gray-100">存在则返回下标，否则存入哈希表</p>
                                </div>
                                <div class="w-full md:w-1/2 animate__animated animate__slideInRight animate__delay-900ms">
                                    <img src="https://picsum.photos/id/4/300/200" alt="返回结果" class="image-card animate-on-present animate__animated animate__fadeInRight">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 第四页：代码演示与流程图 -->
            <section data-background-image="img/bg2.png">
                <div class="flex flex-col items-center justify-center h-full">
                    <h2 class="animate-on-present animate__animated animate__zoomIn mb-8 text-[clamp(1.8rem,5vw,3rem)]">
                        <i class="fa fa-code mr-3"></i>代码实现
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-4xl animate-on-present">
                        <div class="content-card animate__animated animate__fadeInUp animate__delay-200ms">
                            <pre class="text-gray-300">
function twoSum(nums, target) {
    const map = new Map();
    for (let i = 0; i < nums.length; i++) {
        const complement = target - nums[i];
        if (map.has(complement)) {
            return [map.get(complement), i];
        }
        map.set(nums[i], i);
    }
    return [];
}

// 调用示例
const result = twoSum([2, 7, 11, 15], 9);
console.log(result); // 输出: [0, 1]
                            </pre>
                            <p class="mt-4 text-gray-200">
                                代码块使用 <span class="text-yellow-300">fadeInUp</span> 动画，配合延迟逐行显示
                            </p>
                        </div>
                        <div class="content-card animate__animated animate__slideInRight animate__delay-400ms">
                            <h3 class="text-2xl mb-4 text-yellow-300">算法流程图</h3>
                            <img src="https://picsum.photos/id/10/600/400" alt="算法流程图" class="image-card w-full animate-on-present animate__animated animate__zoomIn">
                            <p class="mt-4 text-gray-200">算法执行流程可视化</p>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 第五页：复杂度分析与图表 -->
            <section data-background-image="img/bg1.png">
                <div class="flex flex-col items-center justify-center h-full">
                    <h2 class="animate-on-present animate__animated animate__bounceInDown mb-8 text-[clamp(1.8rem,5vw,3rem)]">
                        <i class="fa fa-bar-chart mr-3"></i>复杂度分析
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-3xl animate-on-present">
                        <div class="content-card animate__animated animate__fadeInUp animate__delay-200ms">
                            <h3 class="text-2xl mb-3 text-green-400">时间复杂度</h3>
                            <p class="text-gray-100 text-xl mb-2"><strong>O(n)</strong></p>
                            <p class="text-gray-100">仅需一次数组遍历，哈希表操作O(1)</p>
                            <img src="https://picsum.photos/id/11/300/200" alt="时间复杂度" class="image-card w-full mt-4 animate-on-present animate__animated animate__fadeInUp">
                        </div>
                        <div class="content-card animate__animated animate__fadeInUp animate__delay-400ms">
                            <h3 class="text-2xl mb-3 text-purple-400">空间复杂度</h3>
                            <p class="text-gray-100 text-xl mb-2"><strong>O(n)</strong></p>
                            <p class="text-gray-100">最坏情况下存储所有数组元素</p>
                            <img src="https://picsum.photos/id/12/300/200" alt="空间复杂度" class="image-card w-full mt-4 animate-on-present animate__animated animate__fadeInUp">
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 第六页：总结与示意图 -->
            <section data-background-image="img/bg2.png">
                <div class="flex flex-col items-center justify-center h-full">
                    <h2 class="animate-on-present animate__animated animate__jackInTheBox mb-8 text-[clamp(1.8rem,5vw,3rem)]">
                        <i class="fa fa-lightbulb-o mr-3"></i>核心要点
                    </h2>
                    <div class="content-card animate-on-present">
                        <div class="space-y-6">
                            <div class="flex flex-col md:flex-row items-center gap-6">
                                <div class="w-full md:w-2/3 animate__animated animate__fadeInUp animate__delay-200ms">
                                    <h3 class="text-2xl text-yellow-300">补数查找</h3>
                                    <p class="text-gray-100">利用 target - nums[i] 寻找匹配元素</p>
                                </div>
                                <div class="w-full md:w-1/3 animate__animated animate__slideInRight animate__delay-300ms">
                                    <img src="https://picsum.photos/id/20/200/200" alt="补数查找" class="image-card animate-on-present animate__animated animate__bounceIn">
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-center gap-6">
                                <div class="w-full md:w-2/3 animate__animated animate__fadeInUp animate__delay-400ms">
                                    <h3 class="text-2xl text-yellow-300">哈希表优势</h3>
                                    <p class="text-gray-100">O(1) 时间复杂度查找，优化性能</p>
                                </div>
                                <div class="w-full md:w-1/3 animate__animated animate__slideInRight animate__delay-500ms">
                                    <img src="https://picsum.photos/id/21/200/200" alt="哈希表" class="image-card animate-on-present animate__animated animate__bounceIn">
                                </div>
                            </div>
                            
                            <div class="flex flex-col md:flex-row items-center gap-6">
                                <div class="w-full md:w-2/3 animate__animated animate__fadeInUp animate__delay-600ms">
                                    <h3 class="text-2xl text-yellow-300">动画应用</h3>
                                    <p class="text-gray-100">标题用弹跳动画，正文用淡入，代码用延迟效果</p>
                                </div>
                                <div class="w-full md:w-1/3 animate__animated animate__slideInRight animate__delay-700ms">
                                    <img src="https://picsum.photos/id/22/200/200" alt="动画应用" class="image-card animate-on-present animate__animated animate__bounceIn">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 第七页：哈希表示例图 -->
            <section data-background-image="img/bg1.png">
                <div class="flex flex-col items-center justify-center h-full">
                    <h2 class="animate-on-present animate__animated animate__bounceInDown mb-8 text-[clamp(1.8rem,5vw,3rem)]">
                        <i class="fa fa-database mr-3"></i>哈希表示意图
                    </h2>
                    <div class="content-card animate-on-present">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="animate__animated animate__fadeInUp animate__delay-200ms">
                                <h3 class="text-2xl mb-4 text-yellow-300">哈希表工作原理</h3>
                                <p class="text-gray-100 mb-4">哈希表通过键值对存储数据，实现O(1)时间查找</p>
                                <ul class="text-gray-100 space-y-2">
                                    <li>• 键: 数组元素值</li>
                                    <li>• 值: 元素索引</li>
                                    <li>• 查找补数时直接查询键</li>
                                </ul>
                            </div>
                            <div class="animate__animated animate__slideInRight animate__delay-400ms">
                                <img src="https://picsum.photos/id/30/600/400" alt="哈希表示意图" class="image-card w-full animate-on-present animate__animated animate__zoomIn">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/notes/notes.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/markdown/markdown.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js"></script>
    
    <script>
        // 初始化Reveal.js
        Reveal.initialize({
            controls: true,
            progress: true,
            center: true,
            hash: true,
            transition: 'zoom',
            plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
        });
        
        // 监听幻灯片切换事件，重置动画
        Reveal.addEventListener('slidechanged', function(event) {
            document.querySelectorAll('.animate-on-present').forEach(el => {
                el.classList.remove('animate__animated');
                setTimeout(() => el.classList.add('animate__animated'), 10);
            });
        });
    </script>
</body>
</html>